<template>
    <view :style="warpCss">
        <view :style="maskLayer"></view>
        <view class="diy-notice relative overflow-hidden">
            <view class="flex items-center pl-[28rpx] p-[22rpx]">
                <template v-if="diyComponent.noticeType == 'img'">
                    <template v-if="diyComponent.imgType == 'system'">
                        <image v-if="diyComponent.systemUrl == 'style_1'" :src="img(`static/resource/images/diy/notice/${diyComponent.systemUrl}.png`)" class="h-[40rpx] max-w-[130rpx] mr-[20rpx] flex-shrink-0" mode="heightFix"/>
                        <image v-else-if="diyComponent.systemUrl == 'style_2'" :src="img(`static/resource/images/diy/notice/${diyComponent.systemUrl}.png`)" class="w-[200rpx] mr-[20rpx] h-[30rpx] flex-shrink-0" mode="heightFix" />
                    </template>
                    <image v-else-if="diyComponent.imgType == 'diy'" :src="img(diyComponent.imageUrl || '')" class="w-[200rpx] h-[30rpx] mr-[20rpx] flex-shrink-0" mode="heightFix"/>
                </template>
                <view v-if="diyComponent.noticeType == 'text' && diyComponent.noticeTitle" class="max-w-[128rpx] px-[12rpx] text-[26rpx] h-[40rpx] leading-[40rpx] text-[var(--primary-color)] bg-[var(--primary-color-light)] truncate rounded-[8rpx] mr-[20rpx] flex-shrink-0">{{ diyComponent.noticeTitle }}</view>
                <view class="flex-1 flex overflow-hidden horizontal-body" :id="'horizontal-body-'+diyComponent.id" :class="{'items-center':diyComponent.scrollWay == 'upDown'}">
                    <!-- 横向滚动 -->
                    <view class="horizontal-wrap" :style="marqueeStyle" v-if="diyComponent.scrollWay == 'horizontal'">
						<view class="marquee marquee-one" id="marquee-one">
							<view class="item flex-shrink-0 !leading-[40rpx] h-[40rpx]" :class="{'ml-[80rpx]':index}" v-for="(item, index) in diyComponent.list" :key="index" @click="toRedirect(item)" :style="{ color: diyComponent.textColor, fontSize: diyComponent.fontSize * 2 + 'rpx',  fontWeight: diyComponent.fontWeight }">{{ item.text }}</view>
						</view>
						<view class="marquee" v-if="marqueeBodyWidth < (marqueeOneWidth-30)">
							<view class="item flex-shrink-0 !leading-[40rpx] h-[40rpx]" :class="{'ml-[80rpx]':index}" v-for="(item, index) in diyComponent.list" :key="index" @click="toRedirect(item)" :style="{ color: diyComponent.textColor, fontSize: diyComponent.fontSize * 2 + 'rpx',  fontWeight: diyComponent.fontWeight }">{{ item.text }}</view>
						</view>
                    </view>

                    <!-- 上下滚动 -->
                    <template v-if="diyComponent.scrollWay == 'upDown'">
                        <swiper :vertical="true" :duration="500" autoplay="true" circular="true" class="flex-1">
                            <swiper-item v-for="(item, index) in diyComponent.list" :key="index" @touchmove.prevent.stop>
                                <text @click="toRedirect(item)" class="beyond-hiding using-hidden" :style="{ color: diyComponent.textColor, fontSize: diyComponent.fontSize * 2 + 'rpx', fontWeight: diyComponent.fontWeight }">
                                    {{ item.text }}
                                </text>
                            </swiper-item>
                        </swiper>
                        <text class="nc-iconfont nc-icon-youV6xx text-[26rpx] -ml-[8rpx] pl-[30rpx]" :style="{'color': '#999', 'fontWeight': diyComponent.fontWeight}"></text>

                    </template>
                </view>

            </view>

            <u-popup :show="noticeShow" @close="noticeShow = false"  mode="center" :round="5" :safeAreaInsetBottom="false">
				<view @touchmove.prevent.stop>
					<view class="py-[25rpx] text-sm leading-none border-0 border-solid border-b-[2rpx] border-[#eee] flex items-center justify-between">
						<text class="ml-[30rpx]">公告</text>
						<text class="mr-[20rpx] nc-iconfont nc-icon-guanbiV6xx text-[35rpx]" @click="noticeShow = false"></text>
					</view>
					<scroll-view scroll-y="true" class="px-6 py-3 w-[480rpx] h-[500rpx] text-sm">{{ noticeContent }}</scroll-view>
					<button @click="noticeShow = false" class="!mx-[30rpx] !mb-[40rpx] !w-auto !h-[70rpx] text-[24rpx] leading-[70rpx] rounded-full text-white !bg-[#ff4500] !text-[#fff]">我知道了</button>
				</view>
            </u-popup>

        </view>
    </view>
</template>

<script setup lang="ts">
// 公告组件
import { ref,computed, watch, onMounted, nextTick,getCurrentInstance } from 'vue';
import { img } from '@/utils/common';
import useDiyStore from '@/app/stores/diy';

const props = defineProps(['component', 'index', 'pullDownRefreshCount']);
const diyStore = useDiyStore();
const noticeShow = ref(false);
const noticeContent = ref('');

const diyComponent = computed(() => {
    if (diyStore.mode == 'decorate') {
        return diyStore.value[props.index];
    } else {
        return props.component;
    }
})

const warpCss = computed(() => {
    var style = '';
    style += 'position:relative;';
    if(diyComponent.value.componentStartBgColor) {
        if (diyComponent.value.componentStartBgColor && diyComponent.value.componentEndBgColor) style += `background:linear-gradient(${diyComponent.value.componentGradientAngle},${diyComponent.value.componentStartBgColor},${diyComponent.value.componentEndBgColor});`;
        else style += 'background-color:' + diyComponent.value.componentStartBgColor + ';';
    }

    if(diyComponent.value.componentBgUrl) {
        style += `background-image:url('${ img(diyComponent.value.componentBgUrl) }');`;
        style += 'background-size: cover;background-repeat: no-repeat;';
    }

    if (diyComponent.value.topRounded) style += 'border-top-left-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
    if (diyComponent.value.topRounded) style += 'border-top-right-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
    if (diyComponent.value.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
    if (diyComponent.value.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
    return style;
})

// 背景图加遮罩层
const maskLayer = computed(()=>{
    var style = '';
    if(diyComponent.value.componentBgUrl) {
        style += 'position:absolute;top:0;width:100%;';
        style += `background: rgba(0,0,0,${diyComponent.value.componentBgAlpha / 10});`;
        style += `height:${height.value}px;`;

        if (diyComponent.value.topRounded) style += 'border-top-left-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
        if (diyComponent.value.topRounded) style += 'border-top-right-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
        if (diyComponent.value.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
        if (diyComponent.value.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
    }

    return style;
});

watch(
    () => props.pullDownRefreshCount,
    (newValue, oldValue) => {
        // 处理下拉刷新业务
    }
)

const marqueeBodyWidth = ref(0); // 容器宽度
const marqueeOneWidth = ref(0); // 内容宽度
const marqueeStyle = ref(''); // 横向滚动样式
const time = ref(0); // 滚动完成时间
const delayTime = ref(800); // 动画延迟时间

// 绑定横向滚动事件
const bindCrossSlipEvent = ()=> {
    if (diyComponent.value.scrollWay == 'horizontal') {
        setTimeout(() => {
            nextTick(() => {
                // #ifdef  MP-WEIXIN
                uni.createSelectorQuery().in(instance).select('#horizontal-body-' + diyComponent.value.id).boundingClientRect(res => {
                    marqueeBodyWidth.value = res.width;
                    const query = uni.createSelectorQuery().in(instance);
                    query.select('#horizontal-body-' + diyComponent.value.id + ' .marquee-one').boundingClientRect((data: any) => {
                        marqueeOneWidth.value = data.width
                        time.value = Math.ceil(marqueeOneWidth.value * 14);
                        if (marqueeBodyWidth.value > (marqueeOneWidth.value-30)) {
                            marqueeStyle.value = `animation: none;`;
                        } else {
                            marqueeStyle.value = `
                                animation-duration: ${ time.value }ms;
                                animation-delay: ${ delayTime.value }ms;`;
                        }
                    }).exec();
                }).exec();
                // #endif
                // #ifdef  H5
                let documentObj = window.document.getElementById('horizontal-body-' + diyComponent.value.id);
                let marqueeOne = window.document.getElementById('marquee-one');
                if(documentObj && marqueeOne) {
                    marqueeBodyWidth.value = documentObj.offsetWidth;
                    marqueeOneWidth.value = marqueeOne.offsetWidth;
                    time.value = Math.ceil(marqueeOneWidth.value * 14);
                    if (marqueeBodyWidth.value > (marqueeOneWidth.value-30)) {
                        marqueeStyle.value = `animation: none;`;
                    } else {
                        marqueeStyle.value = `
                            animation-duration: ${ time.value }ms;
                            animation-delay: ${ delayTime.value }ms;`;
                    }
                }
                // #endif
            });
        });
    }
}

onMounted(() => {
    bindCrossSlipEvent();
    refresh();
    // 装修模式下刷新
    if (diyStore.mode == 'decorate') {
        watch(
            () => diyComponent.value,
            (newValue, oldValue) => {
                if (newValue && newValue.componentName == 'Notice') {
                    bindCrossSlipEvent();
                    refresh();
                }
            }
        )
    }
});

const instance = getCurrentInstance();
const height = ref(0)

const refresh = ()=> {
    nextTick(() => {
        const query = uni.createSelectorQuery().in(instance);
        query.select('.diy-notice').boundingClientRect((data: any) => {
            height.value = data.height;
        }).exec();
    })
}

const toRedirect = (data: {}) => {
    if (diyStore.mode == 'decorate') return false;
    if (diyComponent.value.showType == 'popup') {
        noticeShow.value = true;
        noticeContent.value = data.text;
    } else {
        diyStore.toRedirect(data.link);
    }
}
</script>

<style lang="scss" scoped>
    .main-wrap {
        display: inline-block;
        width: calc(100% - 100rpx);
        position: relative;
    }

    swiper {
        height: 50rpx;
    }

    .beyond-hiding {
        display: inline-block;
        width: 100%;
        white-space: nowrap;
		line-height: 50rpx
    }

    .notice-popup {
        padding: 0 30rpx 40rpx;
        background-color: #fff;

        .head-wrap {
            font-size: 32rpx;
            line-height: 100rpx;
            height: 100rpx;
            display: block;
            text-align: center;
            position: relative;
            border-bottom: 2rpx solid #eeeeee;
            margin-bottom: 20rpx;

            .iconfont {
                position: absolute;
                float: right;
                right: 0;
                font-size: 32rpx;
            }
        }

        .content-wrap {
            max-height: 600rpx;
            overflow-y: auto;
        }

        button {
            margin-top: 40rpx;
        }
    }

    .horizontal-wrap {
        height: 40rpx;
		display: flex;
		align-items: center;
		transform: translateZ(0);
		animation: marquee 0s 0s linear infinite;
		transform-style: preserve-3d;
		backface-visibility: hidden;
    }

    

    .marquee {
        display: flex;
        align-items: center;
        height: 100%;
        white-space: nowrap;
		padding-right: 30px;
		
		// -webkit-perspective: 1000;
	 //   -moz-perspective: 1000;
	 //   -ms-perspective: 1000;
	 //   perspective: 1000;
    }

    @keyframes marquee {
        0% {
            transform: translateX(0);
        }
		20%{
		transform: translateX(-10%);
		}
		40%{
		transform: translateX(-20%);
		}
		60%{
		transform: translateX(-30%);
		}
		80%{
		transform: translateX(-40%);
		}
        100% {
            transform: translateX(-50%);
        }
    }
</style>
